/* Main container */

.main {
  margin: 20px;
}


/* Navigation */

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(48, 146, 149);
}

.nav li {
  float: left;
}

.nav li a, .nav li.nav-text p {
  display: block !important;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
  margin: 0;
}

.nav li a:hover:not(.active) {
  background-color: rgb(253, 253, 253);
  color: black;
}

.active {
  background-color: #fa6908;
}

/* Forms */

label {
  font-size: 25px;
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input:not(.form-control, .flt)[type=text],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid #ccc;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  resize: none;
}

button:not(.btn) {
  background-color: #fa6908;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 18px 2px;
}

.delete {
  background-color: #fa0808;
}


/* Flash messages */

.flash-success {
  padding: 20px;
  background-color: #33a43a;
  color: white;
  margin: 20px 0px;
  border-radius: 4px;
}

.flash-error {
  padding: 20px;
  background-color: rgb(235, 47, 47);
  color: white;
  margin: 20px 0px;
  border-radius: 4px;
}


/* Error messages */

.error {
  color: red;
}

.error-border {
  border: 2px solid red !important;
}